<script setup>
import { ref, onMounted, toRefs} from 'vue'
import { objextend } from '@/js/function.js'
import { config_default } from './config.js'
import myselect from '../select.vue'

const props = defineProps({
    config: Object,
    active: String,
});
//需要响应式时使用toRefs
const { config } = toRefs(props);


const mergedObj = objextend(config_default(), config.value)
objextend(config.value, mergedObj)

</script>

<template>


    <el-form :model="config">
        <h1>修改：<input type="text" v-model="config.title" style="border-width: 0 0 1px 0;"></h1>
        <el-form-item label="文字">
            <el-input type="textarea" v-model="config.text" />
        </el-form-item>
        <el-form-item label="文字颜色">
            <el-color-picker v-model="config.color" />
        </el-form-item>
        <el-form-item label="字号">
            <el-input-number type="number" :min="0" v-model="config.fontSize"></el-input-number>
        </el-form-item>
        <el-form-item label="宽度">
            <el-input type="number" v-model="config.width" :disabled="config.width_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.width_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="%" value="%" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <el-form-item label="高度">
            <el-input type="number" v-model="config.height" :disabled="config.height_unit=='auto'" title="auto自适应可无需设置数值">
                <template #append>
                    <el-select v-model="config.height_unit" placeholder="单位" style="width: 80px">
                        <el-option label="px" value="px" />
                        <el-option label="auto" value="auto" />
                    </el-select>
                </template>
            </el-input>
        </el-form-item>
        <!-- <el-form-item label="滚动方向">
            <el-select v-model="config.direction" placeholder="请选择">
                <el-option label="水平" value="horizontal" />
                <el-option label="垂直" value="vertical" />
            </el-select>垂直方向需设置px高度
        </el-form-item> -->
        <el-form-item label="链接地址">
            <!-- <el-input type="text" v-model="config.link" /> -->
            <myselect :config="config.link" size="default" />&nbsp;
            <a @click="config.link={type:'',link:'',name:'',url:''}">清空</a>
            <div style="width: 100%">
            {{ config.link.name }}<br>
            {{ config.link.link }}
            </div>
        </el-form-item>
        <el-form-item label="空链接提示">
            <el-input type="text" v-model="config.linknull" />
        </el-form-item>
        <!-- <el-form-item label="自定义项">
            <el-input type="text" v-model="config.define" />
        </el-form-item> -->
        <el-form-item label="备注">
            <el-input type="text" v-model="config.note" />
        </el-form-item>
    </el-form>


</template>

<style scoped>

</style>